<!-- 事件配置管理 -->
<template>
    <div class="user_main">
        <div class="safelist-search-container mb-16">
            <a-row class="search-row">
                <a-col class="mr-8">
                    <a-select v-model:value="state.searchData.alarmCode" class="mr-8" style="width: 150px;"
                        placeholder="全部报警事件" optionFilterProp="label">
                        <a-select-option v-for="item in getEnumOptions('alarmEvent')" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col class="mr-8">
                    <a-select v-model:value="state.searchData.riskLevel" class="mr-8" style="width: 150px;"
                        placeholder="全部事件等级" optionFilterProp="label">
                        <!-- <a-select-option value="">全部事件等级</a-select-option>
                        <a-select-option value="紧急">紧急</a-select-option>
                        <a-select-option value="重要">重要</a-select-option>
                        <a-select-option value="一般">一般</a-select-option>
                        <a-select-option value="提示">提示</a-select-option> -->
                        <a-select-option v-for="item in getEnumOptions('eventLevel')" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col class="mr-8">
                    <a-select v-model:value="state.searchData.handleType" class="mr-8" style="width: 150px;"
                        placeholder="全部处理方式" optionFilterProp="label">
                            <a-select-option v-for="item in getEnumOptions('eventProcessType')" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col class="mr-8">
                    <a-select v-model:value="state.searchData.isActive" class="mr-8" style="width: 150px;"
                        placeholder="状态" optionFilterProp="label">
                        <!-- <a-select-option value="">全部状态</a-select-option> -->
                        <a-select-option :value="true">启用</a-select-option>
                        <a-select-option :value="false">禁用</a-select-option>
                    </a-select>
                </a-col>
                <a-col>
                    <a-button type="primary" class="mr-8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" class="mr-8" ghost @click="handleEmpty">重置</a-button>

                </a-col>
            </a-row>
            <a-row>
                <a-button type="primary" class="nmc-add-btn-primary" @click="handleAdd">新增</a-button>
            </a-row>
        </div>
        <div class="safelist-table-container">
            <a-table 
                :columns="tableProps.columns" 
                :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination" 
                :scroll="{ y: 'calc(100vh - 200px)' }"
    
                row-key="id">
                <template #bodyCell="{ column, record }">
                    <!-- 状态开关 -->
                    <div v-if="column.dataIndex === 'isActive'">
                        <a-switch 
                            v-model:checked="record.isActive" 
                            @change="(checked) => handleStatusChange(record, checked)"
                            :checked-value="true"
                            :un-checked-value="false"
                            checked-children="启用"
                            un-checked-children="禁用"
                        />
                    </div>
                    <div v-if="column.dataIndex === 'alarmCode'">
                        {{ getEnumValue('alarmEvent',record[column.dataIndex]) }}
                    </div>
                    <div v-if="column.dataIndex === 'riskLevel'">
                        {{ getEnumValue('eventLevel',record[column.dataIndex]) }}
                    </div>
                    <div v-if="column.dataIndex === 'handleType'">
                        {{ getEnumValue('eventProcessType',record[column.dataIndex]) }}
                    </div>
                    <!-- 操作 -->
                    <div v-if="column.dataIndex === 'action'" class="action_box">
                        <span @click="editConfig(record)">编辑</span>
                        <span @click="deleteConfig(record)">删除</span>
                    </div>
                </template>
            </a-table>
        </div>

        <!-- 引入编辑弹窗组件 -->
        <EventConfigEdit ref="eventConfigEditRef" @success="handleEditSuccess" />
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { message } from "ant-design-vue";
import EventConfigEdit from './components/eventConfigEdit.vue'
import { bizEventConfigQueryPage,bizEventConfigDelete } from "@/service/nmcApi"
import { deleteConfirmModal } from '@/utils'
import { getEnumOptions,getEnumValue } from '@/utils/enum'
import { bizEventConfigUpdate } from '@/service/nmcApi'
const tableProps = ref({
    columns: [
        {
            title: '报警事件',
            dataIndex: 'alarmCode',
            width: 120
        },
        {
            title: '事件等级',
            dataIndex: 'riskLevel',
            width: 100
        },
        {
            title: '处理方式',
            dataIndex: 'handleType',
            width: 120
        },
        {
            title: '重复报警控制',
            dataIndex: 'repeatCount',
            width: 120
        },
        {
            title: '状态',
            dataIndex: 'isActive',
            width: 100
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 80,
            fixed: 'right'
        }
    ],
    dataSource: [], //列表数据
    pagination: {
        current: 1,//当前页数
        pageSize: 10,//每页条数
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `共有${total}条数据`,
        onChange: (current, pageSize) => {
            tableProps.value.pagination.current = current;
            tableProps.value.pagination.pageSize = pageSize;
            init();
        }
    }
})



// 编辑弹窗组件引用
const eventConfigEditRef = ref()

const state = reactive({
    searchData: {
        alarmCode: null,
        riskLevel: null,
        handleType: null,
        isActive: null
    }
})


onMounted(() => {
    init();
})

// 编辑配置
const editConfig = (record) => {
    eventConfigEditRef.value.showModal(record)
}
//新增
const handleAdd = () => {
    eventConfigEditRef.value.showModal({})
}

//删除
const deleteConfig = (record) => {
    deleteConfirmModal(() => {
        bizEventConfigDelete({id: record.id}).then(res => {
            if (res && res.status === "000_0000_0000") {
                message.success('删除成功')
                init()
            } else {
                message.error(res.message || '删除失败')
            }
        })
    })
}

// 编辑成功回调
const handleEditSuccess = (data) => {
    init()
}

// 状态变更
const handleStatusChange = (record, checked) => {
    record.isActive = checked;

    bizEventConfigUpdate({
        ...record,
        isActive: checked ? true : false
    }).then(res => {
        if (res && res.status === "000_0000_0000") {
            message.success(`${record.alarmCode}状态已${checked ? '启用' : '禁用'}`);

        }
        init()
    })
}

//获取列表数据
const init = () => {

    bizEventConfigQueryPage({
        pageNum: tableProps.value.pagination.current,
        pageSize: tableProps.value.pagination.pageSize,
        ...state.searchData
    }).then(res => {
        if (res && res.status === "000_0000_0000") {
            tableProps.value.dataSource = res.result.list
            tableProps.value.pagination.total = Number(res.result.total)
        } else {
            tableProps.value.dataSource = []
            tableProps.value.pagination.total = 0
            message.warning('暂无数据')
        }
    })

}

//搜索
const handleSearch = () => {
    tableProps.value.pagination.current = 1;
    init()
}

//重置
const handleEmpty = () => {
    state.searchData = {
        alarmCode: null,
        riskLevel: null,
        handleType: null,
        isActive: null
    }
    tableProps.value.pagination.current = 1;
    init()
}



</script>

<style lang="less" scoped>
.user_main {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;

    .action_box {
        display: flex;
        font-size: 14px;
        color: #00CCCC;

        span {
            cursor: pointer;
            margin-right: 8px;
        }
    }
}

.mb-16 {
    margin-bottom: 16px;
}

.mr-8 {
    margin-right: 8px;
}
</style> 